<template>
  <van-nav-bar
      title="学生端"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
  >
    <template #right>
      <van-icon name="search" size="18"/>
    </template>
  </van-nav-bar>
  <!--  &lt;!&ndash;  定义一个插槽 允许使用我们的这个 如果我们的中间部分是可以进行变化的 那么我们就可以定义一个插槽&ndash;&gt;-->
  <!--  <slot name="content">-->
  <!--    <div>内容在次</div>-->
  <!--  </slot>-->
  <!--  没有用路由的时候我们的处理方式的页面-->
  <!--  <template v-if="active==='index'">-->
  <!--    <index/>-->
  <!--  </template>-->
  <!--  <template v-if="active==='team'">-->
  <!--    <team/>-->
  <!--  </template>-->
  <!--  这种是属于可以直接省略我们的路由-->
  <div id="content">
    <router-view/>
  </div>
  <van-tabbar route @change="onChange">
    <van-tabbar-item to="/" icon="home-o" name="index">首页</van-tabbar-item>
    <van-tabbar-item to="/uploadVideo" icon="search" name="team">上传视频</van-tabbar-item>
    <van-tabbar-item to="/activity" icon="friends-o" name="me">创意广场</van-tabbar-item>
    <van-tabbar-item to="/questionnaire" icon="guide-o" name="me">调查问卷</van-tabbar-item>
  </van-tabbar>
</template>
<script setup>
import 'vant/es/toast/style'
import {useRouter} from "vue-router";
const router = useRouter()
const onClickLeft = () => {
  //back就是回到刚刚来的页面
  router.back()
}
const onClickRight = () => {
  router.push('/search')
}
</script>
<style scoped>
</style>